<template>
    <div class="cart-sku" ref="target">
      <div class="attrs" @click="toggle()" ref="target">
        <span class="ellipsis">{{attrsText}}</span>
        <i class="iconfont icon-angle-down"></i>
      </div>
      <div class="layer" v-if="show">
        <div v-if="loading" class="loading"></div>
        <!-- sku组件 -->
        <GoodsSku @change="changeSku" v-else :skuId="skuId" :goods="goods"/>
        <!-- 确认按钮 -->
        <XtxButton @click="submit" v-if="!loading" type="primary" size="mini" style="margin-left: 60px;">确认</XtxButton>
      </div>
    </div>
  </template>
  <script>
  import {ref} from 'vue'
import { onClickOutside } from '@vueuse/core'
import {getCartGoodsSku} from '@/api/cart'
import GoodsSku from '@/views/goods/components/goods-sku.vue'
  export default {
    name: 'CartSku',
    components: {GoodsSku},
    props: {
        attrsText: {
            type: String,
            default: ''
        },
        skuId: {
            type: String,
            default: ''
        }
    },
    setup (props, {emit}) {
        const show = ref(false)
        const goods = ref(null)
        const loading = ref(false)
        const open = () => {
            show.value = true
            loading.value = true
            //发请求，获取sku
            getCartGoodsSku(props.skuId).then(data => {
                goods.value = data.result
                loading.value = false
            })
        }
        const close = () => {
            show.value = false
        }
        const toggle = () => {
            show.value? close(): open()
        }

        //点击除自身之外的其他区域也可关闭
        const target = ref(null)
        onClickOutside(target, () => {
            close()
        })

        //拿到最新的sku组合
        const newSku = ref(null)
        const  changeSku = (sku) => {
            newSku.value = sku
        }

        //点击确认按钮把最新sku传递给父组件,由父组件去更新sku信息
        const submit = () =>{
            if(newSku.value && newSku.value.skuId && newSku.value.skuId !== props.skuId) {
                emit('change', newSku.value)
                close ()
            }
        }
        return {show, close, open, toggle, target, goods, loading, submit, changeSku}
    }
  }
  </script>
  <style scoped lang="less">
  .cart-sku {
    height: 28px;
    border: 1px solid #f5f5f5;
    padding: 0 6px;
    position: relative;
    margin-top: 10px;
    display:inline-block;
    .attrs {
      line-height: 24px;
      display: flex;
      span {
        max-width: 230px;
        font-size: 14px;
        color: #999;
      }
      i {
        margin-left: 5px;
        font-size: 14px;
      }
    }
    .layer {
      position: absolute;
      left: -1px;
      top: 40px;
      z-index: 10;
      width: 400px;
      border: 1px solid @xtxColor;
      box-shadow: 2px 2px 4px lighten(@xtxColor,50%);
      background: #fff;
      border-radius: 4px;
      font-size: 14px;
      padding: 20px;
      &::before {
        content: "";
        width: 12px;
        height: 12px;
        border-left: 1px solid @xtxColor;
        border-top: 1px solid @xtxColor;
        position: absolute;
        left: 12px;
        top: -8px;
        background: #fff;
        transform: scale(.8,1) rotate(45deg);
      }
      .loading {
        height: 224px;
        background: url(../../../assets/images/loading.gif) no-repeat center;
      }
    }
  }
  </style>